<template>
  <div class="revenueTrend">
    <div class="topArea">
      <div class="top">
        <ul>
          <li
            v-for="(item, index) in mainOperationIncome"
            :key="index"
            @click="getRevenData(index)"
            :class="{ active: cateIndex == index }"
          >
            <div>
              <span>{{ item.indexName }}</span
              ><br /><span>{{ item.thisMonthValue }}</span>
            </div>
            <div>
              <span>完成率</span><br /><span>{{ item.completeRate }}</span>
            </div>
            <div>
              <span>同比增长率</span><br /><span>{{
                item.tbYearIncrease
              }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottomArea" v-if="highFlag" F>
      <div
        class="leftArea"
        :class="{
          active: structDataList == undefined || structDataList.length < 0,
        }"
      >
        <!-- <div class="title">{{reportFNetName}}</div> -->
        <accumIncome :accumIncomeData="accumIncomeData"></accumIncome>
        <incomBar :incomeData="incomeData"></incomBar>
      </div>
      <div
        class="rightArea"
        :class="{
          active: structDataList == undefined || structDataList.length < 0,
        }"
      >
        <div class="title">{{ picName }}</div>
        <threepie :id="id" :option="option" class="pieThere"></threepie>
        <!-- <volumePie :structDTOData='structDTOData'></volumePie> -->
        <!-- <volumePie :structDTOData='structDTOData' v-show="structDTOData !== undefined && structDTOData.length>0"></volumePie> -->
      </div>
    </div>
  </div>
</template>

<script>
import incomBar from "../echarts/incomBar";
import accumIncome from "../echarts/accumIncome";
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import threepie from "../echarts/threepie";
export default {
  name: "revenueTrend",
  components: {
    // tab1,
    // tab2,
    incomBar,
    accumIncome,
    threepie,
  },
  data() {
    return {
      picName: "",
      mainBusinessIncome: {},
      mainOperationIncome: [],
      mainDev: [],
      acctMonth: "",
      mainIncomeTitle: "",
      basicTitle: "",
      dictTitle: "",
      numberIncomeTitle: "",
      accumIncomeData: {},
      incomeData: {},
      pieData: [],
      businessVolume: [],
      cateIndex: 0,
      id: "test",
      structDataList: [],
      highFlag: false,
      leftWidth: true,
      option: {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
        },
        title: {
          text: "", //图表的标题文字
        },
        tooltip: {
          pointFormat: "{point.y}万元",
        },
        credits: {
          enabled: false,
        }, //去掉地址
        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 30, //饼图的厚度
            size: "100%",
          },
        },
        series: [
          {
            type: "pie",
            size: "80%",
            name: "",
            data: [],
            // data:this.pieData,
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              format: "{point.name}<br>{point.y}万元",
              distance: 25,
              padding: 0,
              color: "#636d9a",
            },
          },
          {
            type: "pie",
            size: "80%",
            name: "",
            data: [],
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              format: "{point.percentage:.0f}%",
              distance: -30,
              padding: 0,
              style: {
                color: "#fff",
                textOutline: "none",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    if (screen.width < 1600) {
      this.option.series[0].size = "80%";
      this.option.series[1].size = "80%";
    } else if (screen.width > 1600 && screen.width < 1920) {
      this.option.series[0].size = "90%";
      this.option.series[1].size = "90%";
    } else {
      this.option.series[0].size = "100%";
      this.option.series[1].size = "100%";
    }
    console.log(screen.width);
    this.init();
  },
  methods: {
    init() {
      this.getMainOperationIncomeData();
      // this.getIncomeProductStructData()
      this.getRevenData(0);
    },
    //获取主营数据接口
    getMainOperationIncomeData(index) {
      let token = getCookie("token");
      let that = this;
      return new Promise((resolve) => {
        $budgetAPI.getMainOperationIncomeData(
          { token: token },
          (res) => {
            if (res.code == 0) {
              this.mainOperationIncome = res.content.mainBusinessIncome;
              res.content.mainBusinessIncome.map((item, index) => {
                item.completeRate = item.completeRate + "%";
                item.tbYearIncrease = item.tbYearIncrease + "%";
              });
              this.initPam = res.content.mainBusinessIncome[index].indexCode;
            } else {
              console.log(res);
              // this.alertError(res);
            }
            resolve(this.initPam);
          },
          (err) => {}
        );
      });
    },
    getRevenData(index) {
      this.cateIndex = index;
      this.highFlag = false;
      // this.leftWidth = false;
      this.getMainOperationIncomeData(index).then((res) => {
        let indexCode = res;
        let token = getCookie("token");
        $budgetAPI.getMainIncomeReportData(
          { token: token, indexCode: indexCode },
          (res) => {
            if (res.code == 0) {
              this.picName = res.content.picName;
              let obj = {
                xAxis: [],
                yAxis: [],
                y1Axis: [],
              };
              obj.xAxis = res.content.acctMonths;
              obj.yAxis = res.content.tbIncreaseList;
              let obj1 = {
                xAxis: [],
                yAxis: [],
              };
              obj1.xAxis = res.content.acctMonths;
              obj1.yAxis = res.content.mainIncomeList;
              this.accumIncomeData = obj;
              this.incomeData = obj1;
              console.log(this.incomeData);
              // 3d饼图
              this.pieData = [];
              this.structDataList = res.content.structDataList;
              if (
                res.content.structDataList &&
                res.content.structDataList.length
              ) {
                res.content.structDataList.map((item, index) => {
                  let colorList = ["#7f92f7", "#f48892"];
                  let obj = {};
                  obj["name"] = item.indexName;
                  obj["y"] = Number(item.indexValue);
                  obj["color"] = colorList[index];
                  this.pieData.push(obj);
                });
                this.option.series[0].data = this.pieData;
                this.option.series[1].data = this.pieData;
              }

              this.highFlag = true;
              // this.leftWidth = false;
              // this.$nextTick(()=>{
              // this.leftWidth = true;

              // })
            } else {
              console.log(res);
              //  this.alertError(res);
            }
          },
          (err) => {}
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// .revenueTrend{
//   display: flex;
//   .leftArea{
//     width: 40%;
//     margin-right: 30px;
//     .top{
//       border:2px solid #7f92f7;
//       border-radius: 8px;
//       .mainIncome{
//         position: relative;
//         &:after{
//           content: '';
//           position: absolute;
//           width: 0;
//           height: 0;
//           border-top: 10px solid transparent;
//           border-left: 10px solid #7f92f7;
//           border-bottom: 10px solid transparent;
//           left: 100%;
//           top: calc(50% - 5px);
//         }
//       }
//       .mainIncome,.basicIncome,.dictIncome{
//         height: 100px;
//         background: #7f92f7;
//         padding: 20px;
//         width: 100%;
//         display: flex;
//         span{
//           height: 30px;
//           line-height: 30px;
//         }
//         .content{
//           flex:1;
//           display: inline-block;
//           font-size: 14px;
//           text-align: center;
//           &:not(:last-child){
//             border-right:1px  dashed #dfe4fd;
//           }
//           .contentTitle{
//             color:#dfe4fd;
//           }
//           .contentNumber{
//             color:#fff;
//             font-weight: 700;
//             display: inline-block;
//             margin-top: 8px;
//           }
//         }
//       }
//       .basicIncome,.dictIncome{
//         height: 80px;
//         background: #7b83a9;
//         padding: 20px;
//         width: 80%;
//         display: flex;
//         margin:20px auto;
//         border-radius: 2px;
//         span{
//           height: 20px;
//           line-height: 20px;
//         }
//       }
//     }
//     .bottom{
//       margin-top:20px;
//       .codeIncome{
//          height: 100px;
//          background: #f48892;
//          padding: 20px;
//          width: 100%;
//          display: flex;
//          border-radius: 8px;
//          span{
//            height: 30px;
//            line-height: 30px;
//          }
//          .content{
//            flex:1;
//            display: inline-block;
//            font-size: 14px;
//            text-align: center;
//            &:not(:last-child){
//              border-right:1px  dashed #dfe4fd;
//            }
//            .contentTitle{
//              color:#dfe4fd;
//            }
//            .contentNumber{
//              color:#fff;
//              font-weight: 700;

//            }
//          }
//       }
//     }
//   }
//   .rightArea{
//     width: 60%;
//     position: relative;
//     .income{
//       padding: 5px 10px;
//       background: #f2f3f7;
//       border-radius: 50px;
//       position: absolute;
//       left:0;
//       top:35%;
//     }
//     .yearOnYear{
//       padding: 5px 10px;
//       background: #f2f3f7;
//       border-radius: 50px;
//       position: absolute;
//       right:0px;
//       top:48%;
//     }
//   }
// }
.revenueTrend {
  .topArea {
    ul {
      display: flex;
      li {
        flex: 1;
        float: left;
        text-align: center;
        background-color: #7b83a9;
        border-radius: 5px;
        margin-left: 20px;
        display: flex;
        height: 90px;
        padding: 20px 15px;
        font-size: 14px;
        cursor: pointer;
        div {
          display: inline-block;
          width: 50%;
          border-right: 1px dashed #dfe4fd;
          &:first-child {
            width: 60%;
          }
          &:last-child {
            border-right: none;
          }
          span {
            height: 25px;
            line-height: 25px;
          }
          span:first-child {
            color: #dfe4fd;
          }
          span:last-child {
            color: #fff;
            font-weight: 700;
          }
        }

        &.active {
          background-color: #7f92f7;
        }
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
  .bottomArea {
    display: flex;
    height: 370px;
    position: relative;
    .leftArea {
      width: 60%;
      position: relative;
      margin-right: 30px;
      &.active {
        width: 100%;
        margin-right: 0px;
        transition: 0.3s ease;
      }
      .title {
        position: relative;
        top: 20px;
        color: #000;
        font-size: 14px;
        font-weight: 700;
      }
      .income {
        padding: 5px 10px;
        background: #f2f3f7;
        border-radius: 50px;
        position: absolute;
        left: 0;
        top: 40%;
      }
      .yearOnYear {
        padding: 5px 10px;
        background: #f2f3f7;
        border-radius: 50px;
        position: absolute;
        right: 0px;
        top: 48%;
      }
    }
    // .rightArea{
    //   width: 0;
    // }
    .rightArea {
      width: 40%;
      position: relative;
      &.active {
        width: 0;
        display: none;
      }
      .title {
        position: relative;
        top: 20px;
        color: #000;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
}
</style>
